<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局的上中下结构，中间3列</title>
		<style>
			.HolyGrail{
				display: flex;
				min-height: 100vh;
				flex-direction: column;
			}
			header,footer{
				flex: 1;
				background-color: beige;
			}
			.holy-body{
				display: flex;
				flex: 1;
			}
			.HolyGrail-content{
				flex:1;
			}
			.HolyGrail-nav, .HolyGrail-ads {
			  /* 两个边栏的宽度设为12em */
			  flex: 0 0 12em;
			}
			.HolyGrail-nav {
			  /* 导航放到最左边 */
			  order: -1;
			}
			@media (max-width: 768px) {
			  .holy-body {
			    flex-direction: column;
			    flex: 1;
			  }
			  .HolyGrail-nav,
			  .HolyGrail-ads,
			  .HolyGrail-content {
			    flex: auto;
			  }
			}
		</style>
	</head>
	<body class="HolyGrail">
		<header></header>
		<div class="holy-body">
			<main class="HolyGrail-content">neorong</main>
			<nav class="HolyGrail-nav">nav</nav>
			<aside class="HolyGrail-ads">adv</aside>
		</div>
		<footer></footer>
	</body>
</html>
